// web/src/app/learn/(dashboard)/(routes)/teacher/analytics/_compnents/chart.tsx
'use client';
import React from 'react';
import {Card} from "@/components/ui/card";
import {ResponsiveContainer, XAxis, BarChart, YAxis, Bar} from "recharts";

interface Props {
    data: {
        name: string
        total: number
    }[]
}

const Chart = ({data}: Props) => {
    return (
        <Card className={'pt-4'}>
            <ResponsiveContainer width="100%" height={350}>
                <BarChart data={data}>
                    <XAxis
                        dataKey="name"
                        stroke={'#888888'}
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    <YAxis
                        stroke={'#888888'}
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        tickFormatter={(val) => `￥${val}`}
                    />
                    <Bar
                        fill={'#0369a1'}
                        dataKey="total"
                        radius={[4, 4, 0, 0]}
                    />
                </BarChart>
            </ResponsiveContainer>
        </Card>
    );
};

export default Chart;